<template>
    <el-form :model="forms" label-width="auto" ref="formsRef">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="模型名称" prop="name">
                    <el-input v-model="forms.name"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="表名" prop="tableName">
                    <el-input v-model="forms.tableName" disabled/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="标题字段" prop="title">
                    <el-input v-model="forms.title"/>
                    <span class="zc-description">显示在模型被关联时的名称，比如用户关联部门显示的部门名称。</span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="标题模版" prop="titleTemplate">
                    <el-input v-model="forms.titleTemplate" placeholder="例如: {name} - {mobile}"/>
                    <span class="zc-description">同标题字典，如果设置优先使用</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="操作时间" prop="recordTime">
                    <el-switch
                            v-model="forms.recordTime"
                            :active-value="1"
                            :inactive-value="0"
                    />
                    <span class="zc-description">开启后，数据会记录创建时间、更新时间。</span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="操作人" prop="recordOperator">
                    <el-switch
                            v-model="forms.recordOperator"
                            :active-value="1"
                            :inactive-value="0"
                    />
                    <span class="zc-description">开启后，数据会记录创建人、更新人。</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="软删除" prop="softDelete">
                    <el-switch
                            v-model="forms.softDelete"
                            :active-value="1"
                            :inactive-value="0"
                    />
                    <span class="zc-description">使用逻辑删除而不是物理删除，方便找回数据。</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="forms.description"/>
                </el-form-item>
            </el-col>
        </el-row>
        <!--        <el-row :gutter="20">-->
        <!--            <el-col :span="12">-->
        <!--                <el-form-item label="树形结构" prop="softDelete">-->
        <!--                    <el-input v-model="forms.softDelete"/>-->
        <!--                </el-form-item>-->
        <!--            </el-col>-->
        <!--        </el-row>-->
    </el-form>
</template>
<script type="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getModel, updateModel} from "@/api/api.model";

const formsRef = ref();

const props = defineProps({
    modelId: {}

});

const forms = reactive({
    id: '',
    name: '',
    tableName: '',
    title: '',
    titleTemplate: '',
    description: '',
    softDelete: 1,
    recordTime: 1,
    recordOperator: 1
})

const doSubmit = async () => {
    return await formsRef.value.validate((valid) => {
        if (valid) {
            updateModel(forms).then(res => {
                if (res.data) {
                    console.log(res.data);
                }
            });
        }
    })
}

onMounted(() => {
    getModel({id: props.modelId}).then(res => {
        Object.assign(forms, res.data || {});
    })
})

const exposed = {
    doSubmit
};
defineExpose(exposed);

</script>
